<template>
  <div>
    <van-sticky>
      <van-nav-bar title="欢迎使用" class="nav-bar"/>
    </van-sticky>

    <div v-if="active == 0" class="text-center" :style="'margin-top:'+ (clientHeight/2 - 50)+'px'">
      <HelloWorld :msg="`欢迎使用work-vue-vant-h5`"></HelloWorld>
    </div>
    <div v-if="active == 1" style="border-bottom: 1px solid #E2E2E2">
      <van-cell title="lodash.js" is-link to="/demo/loadsh" />
      <van-cell title="moment.js" is-link to="/demo/moment" />
      <van-cell title="clipboard.js" is-link to="/demo/clipboard" />
      <van-cell title="compressor.js" is-link to="/demo/compressor" />
      <van-cell title="v-charts.js" is-link to="/demo/vcharts" />
    </div>
    <div v-if="active == 2" style="border-bottom: 1px solid #E2E2E2">
      <van-cell title="van-list" is-link to="/demo/vant/van-list" />
    </div>
    <div v-if="active == 3" class="text-center" :style="'margin-top:'+ (clientHeight/2 - 50)+'px'">
      <h2>当前登录用户id: {{user.id}}</h2>
    </div>
    <van-tabbar v-model="active">
      <van-tabbar-item icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item icon="apps-o">模块示例</van-tabbar-item>
      <van-tabbar-item icon="apps-o">Vant使用</van-tabbar-item>
      <van-tabbar-item icon="user-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { Toast } from 'vant'
import { mapGetters } from 'vuex'
import common from '@/mixins/common'
import HelloWorld from '@c/HelloWorld'

export default {
  mixins: [common],
  components: {
    HelloWorld
  },
  computed: {
    ...mapGetters(['user'])
  },
  data () {
    return {
      active: 0
    }
  },
  methods: {
    onLogout () {
      this.$store.dispatch('LOGOUT').then(() => {
        this.$router.push('/login')
      }).catch(err => {
        Toast(err.msg)
      })
    }
  }
}
</script>
<style scoped>
.home {
  text-align: center;
  margin-top: 200px;
}
</style>
